<!DOCTYPE html>
<html>

<head>
    <title>倩狐OA办公系统</title>
    <!--#include virtual ="/ui/oa2/inc/head.html"-->
</head>

<body>
<div id='app'>
    <v-calendar :attributes="attrs" is-expanded title-position="left" @dayclick="viewDay" :to-page.sync="curDate">
        <div slot="day-content" slot-scope="{day, attributes, contentStyle}" :day='day'>
            <div class='c-day-content'>
                <div>{{ day.label }}</div>
            </div>
        </div>
        <div slot="day-popover" slot-scope="{ day, format, masks }">
            <div class="text-xs text-gray-300 font-semibold text-center">
                {{ format(day.date, masks.dayPopover) }}
            </div>
        </div>
    </v-calendar>
</div>
<script src='/ui/foxUI/libs/v-calendar.min.js'></script>
<script>
    var vm = {
        data: {
            curDate: {"month": 6, "year": 2020},
            attrs: [{
                dot: {
                    color: "red",
                    class: "my-dot-class"
                },
                dates: [new Date(2020, 5, 22)],
                popover: {
                    label: "test", visibility: 'click'
                },
            },
                {
                    dot: "green",
                    dates: [new Date(2020, 5, 1), new Date(2020, 5, 10)],
                    popover: {
                        label: "test", visibility: 'click'
                    },
                },
                {
                    dot: "purple",
                    dates: [new Date(2020, 5, 1), new Date(2020, 5, 22)],
                    popover: {
                        label: "test", visibility: 'click'
                    },
                }
            ]
        },
        methods: {
            viewDay({date}) {
                console.log(date);
            },
        }
    }
</script>
</body>

</html>